<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>HT for Web</title>
        <meta charset="utf-8">         
        <script src="HT%20for%20Web_files/ht.js"></script>    
        <script src="HT%20for%20Web_files/box2d.js"></script>
        <script type="text/javascript">
            function init() {
                dm = new ht.DataModel();
                g3d = new ht.graph3d.Graph3dView(dm);
                g3d.setGridVisible(true);
                g3d.addToDOM();
                g3d.setEye(100, 50, 150);

                // Define the world
                var gravity = new b2Vec2(0, -100);
                var doSleep = false;
                world = new b2World(gravity, doSleep);
                
                createNode([0, -3, 0], [100, 6, 100], false, 0);
                createNode([-100, -50, 0], [400, 6, 100], false, -Math.PI/8);
                createNode([100, -50, 0], [50, 6, 100], false, Math.PI/6);
                
                createNode([1, 50, 0], [10, 10, 10], true);
                createNode([-1, 90, 0], [10, 10, 10], true);
                
                render();
            }
            
            function createNode(p3, s3, dynamic, angle) {
                var node = new ht.Node();
                node.p3(p3);
                node.s3(s3);               
                node.setRotationZ(angle == null ? Math.PI * Math.random() : angle);
                dm.add(node);

                var fixDef = new b2FixtureDef();
                if (dynamic) {
                    fixDef.density = 0.5;
                    fixDef.friction = 0.5;
                    fixDef.restitution = 0.5;                    
                    node.s({
                        'all.color': 'red',
                        'batch': 'dynamic'
                    });
                } else {
                    fixDef.density = 0.0;                    
                }

                var shape = new b2PolygonShape();
                shape.SetAsBox(s3[0] / 2, s3[1] / 2);
                fixDef.shape = shape;

                var bodyDef = new b2BodyDef();
                bodyDef.type = dynamic ? b2Body.b2_dynamicBody : b2Body.b2_staticBody;
                bodyDef.position.Set(p3[0], p3[1]);
                bodyDef.angle = node.getRotationZ();
                bodyDef.userData = node;

                world.CreateBody(bodyDef).CreateFixture(fixDef);
            }
            
            count = 0
            function render() {
                count++;
                if(count % 2 === 0){
                    createNode([-1, 50, 0], [10, 10, 10], true);
                }                
                world.Step(1 / 60, 10, 10);
		var list = world.GetBodyList();
		while (list) {                                              
                    var node = list.m_userData;
                    if(node){
                        var position = list.GetPosition();
                        if(position.y < -150 || g3d.isSelected(node)){
                            dm.remove(node);
                            world.DestroyBody(list);
                        }else{
                            node.p3(position.x, position.y, 0);
                            node.setRotationZ(list.GetAngle());                            
                        }                                              
                    }                    
                    list = list.GetNext();
                }                    
                requestAnimationFrame(render);
            }

        </script>
    </head>
    <body onload="init();">
    <div style="display: none;"><script src="http://s23.cnzz.com/z_stat.php?id=1000279011&amp;web_id=1000279011" language="JavaScript"></script></div>
    

<div tabindex="-1" style="border: 0px none; outline: currentcolor none 0px; padding: 0px; position: absolute; margin: 0px; box-sizing: border-box; overflow: hidden; inset: 0px;"><canvas style="pointer-events: none; border: 0px none; outline: currentcolor none 0px; padding: 0px; position: absolute; margin: 0px; box-sizing: border-box; width: 1366px; height: 404px;" width="1366" height="404"></canvas></div></body></html>